<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="定制名称" prop="BusinessName">
			<el-input v-model="ruleForm.BusinessName" />
		</el-form-item>

		<el-form-item label="价格" prop="Price">
			<el-input v-model="ruleForm.Price" />
		</el-form-item>
		<el-form-item label="描述" prop="Desc">
			<el-input v-model="ruleForm.Desc" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
			<el-button type="primary" @click="onAdd">添加流程</el-button>
		</el-form-item>
	</el-form>
	
	<ElDialog title="添加流程" v-model="data.addVisible" center width="500px">
	<add v-if="data.addVisible" @CloseDlog="CloseDlog"></add>
	</ElDialog>

	<hr />
	<ElTable height="30vh" empty-text="暂无数据" :data="ruleForm.ProcessInfos" :border="true" style="width: 100%;">
		<ElTableColumn prop="ProcessName" label="流程名称" width="120px"></ElTableColumn>
		<ElTableColumn prop="Order" label="排序" width="80px"></ElTableColumn>
		<ElTableColumn label="操作" width="180" fixed="right">
			<template #default="scoped">
				<el-button link type="primary" size="small" @click="del(scoped.row)">删除</el-button>
			</template>
		</ElTableColumn>
	</ElTable>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElNotification } from 'element-plus'

	import Businessapi from "@/api/Businessapi"
	import processapi from "@/api/processapi"
	import add from "./addPro.vue"
	const emit = defineEmits(['onSave'])
	const data = reactive({
		addVisible: false,
	})
	interface RuleForm {
		BusinessName : string
		Price : number
		Desc : string
		ProcessInfos: []
	}


	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		BusinessName: '',
		Price: 0,
		Desc: '',
		ProcessInfos: []
	})

	const rules = reactive<FormRules<RuleForm>>({

		BusinessName: [
			{ required: true, message: '请输入角色名称', trigger: 'blur' },
			{ min: 2, max: 5, message: '2-5个字符', trigger: 'blur' },
		],
		Desc: [
			{ required: true, message: '请输入描述', trigger: 'blur' }
		],
		Price: [
			{ required: true, message: '请输入价格', trigger: 'blur' },
			{ min: 2, max: 6, message: '请输2-6位数价格', trigger: 'blur' }
		],


	})

	function CloseDlog(value : any) {
		//console.log(value)
		ruleForm.ProcessInfos.push(value)
		data.addVisible = false;
	}
	/**
	 * 添加
	 */
	function onAdd() {
		data.addVisible = true;
	}
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				// console.log("123=",ruleForm)
				// return
				Businessapi.Add(ruleForm).then(res => {
					
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '添加成功',
							type: 'success',
							duration: 800,
						})
						emit("onSave", true)
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'Error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>